<template>
	<view style="color: #DAB082;">
		<view style="margin: 165rpx 30rpx 90rpx; display: flex;align-items: center;justify-content: space-between;">
			<uni-icons type="arrowleft" size="20" color="#DAB082" @click="backTo()"></uni-icons>
			<text style="font-size: 32rpx;">充值会员卡</text>
			<view style="display: flex;align-items: center;">
				<!-- <image src="/static/huiy/组%2014@2x.png" style="width: 26rpx;height: 26rpx;" mode="aspectFit"></image> -->
				<uni-icons type="help" size="20" color="#DAB082"></uni-icons>
				<text style="font-size: 24rpx;margin-left: 11rpx;">充值说明</text>
			</view>
		</view>
		<view style="margin: 89rpx 30rpx 39rpx;box-sizing: border-box; width: 690rpx;height: 239rpx;border-radius: 22rpx;background-image: linear-gradient(to right,#2B282F,#6F6863);display: flex;">
			<view style="position: relative;padding: 10rpx 0 0 9rpx;">
				<image src="/static/huiy/1.png" style="width: 170rpx;height: 90rpx;" mode="aspectFill"></image>
				<text style="font-size: 22rpx;position: absolute;top:35rpx;left: 115rpx;color: #C97121;">V1</text>
			</view>
			<view style="font-size: 28rpx; display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<view>
					<text style="font-size: 60rpx;">4505</text>
					<text>元</text>
				</view>
				<text>当前会员卡余额</text>
			</view>
		</view>
		<view style="margin: 42rpx 46rpx;display: flex;">
			<view style="position: relative; display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;">
				<text>月卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥5.00</text>
				<text>折合5.00/月</text>
				<text style="display: flex;align-items: center;justify-content: center; width: 70rpx;height: 30rpx;border-radius: 10rpx 0 10rpx 0;background-color: #EED8BD;font-size: 22rpx;color: #552C00;position: absolute;top: 0;left: 0;">限时</text>				
			</view>
			<view style="position: relative; display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;margin: 0 14rpx;">
				<text>季卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥30.00</text>
				<text>折合5.00/月</text>
				<text style="display: flex;align-items: center;justify-content: center; width: 70rpx;height: 30rpx;border-radius: 10rpx 0 10rpx 0;background-color: #EED8BD;font-size: 22rpx;color: #552C00;position: absolute;top: 0;left: 0;">限时</text>				
			</view>
			<view style="position: relative; display: flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items: center; width: 210rpx;height: 220rpx;border: 1rpx solid #E7C19F;border-radius: 10rpx;">
				<text>年卡会员</text>
				<text style="margin: 15rpx 0 30rpx;">¥40.00</text>
				<text>折合5.00/月</text>
				<text style="display: flex;align-items: center;justify-content: center; width: 70rpx;height: 30rpx;border-radius: 10rpx 0 10rpx 0;background-color: #EED8BD;font-size: 22rpx;color: #552C00;position: absolute;top: 0;left: 0;">限时</text>				
			</view>
		</view>
		<view >
			<text style="font-size: 42rpx;display: flex;justify-content: center;">会员尊享权益</text>
			<uni-grid :column="4" :showBorder="false" style="margin-top: 36rpx;">
				<uni-grid-item v-for="(item,index) in 4" :key="index">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<image src="/static/huiy/11.png" style="width: 84rpx;height: 84rpx;" mode=""></image>
						<text style="font-size: 26rpx;margin: 10rpx 0 5rpx;">免运费</text>
						<text style="font-size: 20rpx;color: #686878;">每月福利</text>
					</view>
				</uni-grid-item>
			</uni-grid>
			<uni-grid :column="4" :showBorder="false" style="margin-top: 36rpx;">
				<uni-grid-item v-for="(item,index) in 4" :key="index">
					<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
						<image src="/static/huiy/11.png" style="width: 84rpx;height: 84rpx;" mode=""></image>
						<text style="font-size: 26rpx;margin: 10rpx 0 5rpx;">免运费</text>
						<text style="font-size: 20rpx;color: #686878;">每月福利</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<button type="default" @click="open" style="background-color: #DAB082;width: 100%;height: 88rpx;line-height: 88rpx; border-radius: 0;position: fixed;bottom: 0;font-size: 30rpx;">立即充值</button>
		<uni-popup ref="popup" type="center">
			<image src="/static/huiy/图层%2017@2x.png" @click="close" style="margin-left: 500rpx; width: 57rpx;height: 56rpx;" mode="aspectFit"></image>
			<view style="width: 518rpx;height: 440rpx;border-radius: 14rpx;background-color: #fff;display: flex;flex-direction: column; justify-content: center;align-items: center;">
				<image src="/static/huiy/组%2015@2x.png" style="width: 138rpx;height: 166rpx;" mode="aspectFill"></image>
				<text style="margin: 40rpx 0 47rpx;">支付成功</text>
				<button type="default" style="width: 246rpx;height: 74rpx;line-height: 74rpx;font-size: 28rpx; border-radius: 37rpx;color: #fff;background-color: #DAB082;">确认</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			open() {
				this.$refs.popup.open('center');
			},
			close() {
				this.$refs.popup.close();
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #31281F;
}
</style>
